<template>
	<div class="app">
		<h1>{{msg}},学生姓名是:{{studentName}}</h1>

    <!--  通过父组件给子组件传递函数类型的props实现：子给父传递数据   -->
		<School :getSchoolName="getSchoolName"/>

    <!--  通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第一种写法，使用v-on或者@lntc)   -->
<!--    <Student v-on:lntc="getStudentName" @demo="d1"/>-->

    <!--  通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第一种写法，使用ref,更加灵活，可以实现异步)   -->
    <Student ref="student" @click.native="show"/>
    <!--  native,原生的，加上之后会按照原生的来解析，直接给student的div，不加的话会按照自定义组件的规则来  -->


  </div>
</template>

<script>
	import Student from './components/Student'
	import School from './components/School'

	export default {
		name:'App',
		components:{School,Student},
    data(){
      return{
        msg:'Hello!',
        studentName:''
      }
    },
    methods:{
      getSchoolName(name){
        console.log('App收到了学校名:',name)
      },
      getStudentName(name,...params){
        console.log('App收到了学生名:',name,params)
        this.studentName = name
      },
      d1(name){
        console.log('demo事件被触发了')
      },
      show(){
        alert('nihao')
      }
    },
    mounted(){
      // setTimeout(()=>{
      //   this.$refs.student.$on('lntc',this.getStudentName)
      // },3000)

      this.$refs.student.$on('lntc',this.getStudentName)  //绑定自定义事件

      // this.$refs.student.$on('lntc',(name,...params)=>{
      //   console.log('App收到了学生名：',name,params)
      //   console.log(this) //如果是箭头函数，this指向App，如果不是，this指向student组件
      //   this.studentName = name
      // })  //绑定自定义事件

      // this.$refs.student.$once('lntc',this.getStudentName)  //绑定自定义事件（一次性）
    }
	}
</script>

<style>
  .app{
    background-color:greenyellow;
    padding:5px;
  }
</style>
